<template>
  <div id="space-add" class="container">
    <!-- 标题 -->
    <div class="upload-only-layout">
      <h2 class="page-title">
        {{ route.query?.id ? '修改' : '创建' }}{{ SPACE_TYPE_MAP[spaceType] }}
      </h2>
    </div>

    <!-- 主内容区：采用上下布局替代原有左右布局 -->
    <div class="main-layout">
      <!-- 提交表单区：位于上方 -->
      <div class="form-section">
        <a-form layout="vertical" :model="spaceForm" @finish="handleSpaceSubmit" class="info-form">
          <a-form-item label="空间名称" name="spaceName" class="form-item">
            <a-input
              v-model:value="spaceForm.spaceName"
              placeholder="请输入空间名称"
              class="form-input"
            />
          </a-form-item>
          <a-form-item label="空间级别" name="spaceLevel">
            <!-- 监听选择变化，触发填充逻辑 -->
            <a-select
              v-model:value="spaceForm.spaceLevel"
              placeholder="请选择空间级别"
              allowClear
              :options="SPACE_LEVEL_OPTIONS"
              class="form-select"
              @change="handleLevelChange"
            >
            </a-select>
          </a-form-item>
          <!-- 管理员才可用， 手动修改用户空间大小和条数,空间大小和数量（自动填充目标) -->
          <a-form-item
            v-if="loginUser.userRole === 'admin'"
            label="空间大小 (MB)"
            name="maxSize"
            class="form-item"
            :rules="[
              { required: true, message: '空间大小不能为空!' },
            ]"
          >
            <a-input-number
              style="width: 100%"
              v-model:value="spaceForm.maxSize"
              placeholder="请输入空间大小"
              class="form-input"
              allow-clear
              :controls="false"
            />
          </a-form-item>
          <a-form-item
            v-if="loginUser.userRole === 'admin'"
            label="图片数量"
            name="maxCount"
            class="form-item"
            :rules="[
              { required: true, message: '空间图片数量不能为空!' },
            ]"
          >
            <a-input-number
              style="width: 100%"
              v-model:value="spaceForm.maxCount"
              placeholder="请输入空间数量"
              class="form-input"
              allow-clear
              :controls="false"
            />
          </a-form-item>
          <!-- 提交按钮 -->
          <a-form-item class="form-item submit-item">
            <a-button type="primary" html-type="submit" :loading="loading" class="submit-btn">
              {{ route.query?.id ? '修改' : '创建' }}
            </a-button>
          </a-form-item>
        </a-form>
      </div>

      <!-- 空间介绍区域：位于表单下方 -->
      <a-card title="空间级别介绍" class="intro-section">
        <a-typography-paragraph>
          * 目前仅支持开通普通版，如需升级空间，请联系
          <a href="https://gitee.com/hy040911" target="_blank">花海</a>
        </a-typography-paragraph>
        <a-typography-paragraph v-for="spaceLevel in spaceLevelList" :key="spaceLevel.value">
          <StarTwoTone v-if="spaceLevel.value === SPACE_LEVEL_ENUM.FLAGSHIP" />
          <HeartTwoTone v-if="spaceLevel.value === SPACE_LEVEL_ENUM.PROFESSIONAL" />
          <SmileTwoTone v-if="spaceLevel.value === SPACE_LEVEL_ENUM.COMMON" />
          {{ spaceLevel.text }}： 大小 {{ formatSize(spaceLevel.maxSize) }}， 数量
          {{ spaceLevel.maxCount }}
        </a-typography-paragraph>
      </a-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue'
import {
  addSpaceUsingPost,
  getSpaceVoByIdUsingGet,
  listSpaceLevelUsingGet,
  updateSpaceUsingPost,
} from '@/api/spaceController'
import { message } from 'ant-design-vue'
import { useRoute, useRouter } from 'vue-router'
import {
  SPACE_LEVEL_ENUM,
  SPACE_LEVEL_MAP,
  SPACE_LEVEL_OPTIONS,
  SPACE_TYPE_ENUM,
  SPACE_TYPE_MAP
} from '@/constants/space'
import { formatSize } from '@/util'
import { StarTwoTone, SmileTwoTone, HeartTwoTone } from '@ant-design/icons-vue'
import { useLoginUserStore } from '@/stores/userLogin'

// 初始化路由实例
const router = useRouter()
const route = useRoute()

// 获取当前登录用户
const loginUser = useLoginUserStore().loginUser

// 核心状态：存储当前空间详情（用于编辑场景）
const space = ref<API.SpaceVO | null>(null)

// 定义表单类型：公共字段 + 场景特有字段
type SpaceForm = {
  // 公共字段（创建和编辑都需要）
  spaceName: string
  spaceLevel: number
  // 编辑场景特有字段（管理员可用）
  maxSize?: number
  maxCount?: number
}

// 表单数据初始化：用于创建或编辑空间的表单数据
const spaceForm = reactive<SpaceForm>({
  spaceName: '',
  spaceLevel: SPACE_LEVEL_ENUM.COMMON,
  // 编辑场景特有
  maxSize: 100,
  maxCount: 50,
})

// ------- 团队空间创建和跳转 -------------
// 空间类别
const spaceType = computed(() => {
  if (route.query?.type) {
    return Number(route.query.type)
  }
  return SPACE_TYPE_ENUM.PRIVATE
})


// 核心：定义空间级别与默认值的映射（与后端保持一致）
// 后端定义：COMMON(50,100MB)、PROFESSIONAL(100,250MB)、FLAGSHIP(200,500MB)
const LEVEL_DEFAULT_MAP: Record<number, { maxCount: number; maxSize: number }> = {
  [SPACE_LEVEL_ENUM.COMMON]: {
    maxCount: 50,
    maxSize: 100, // MB
  },
  [SPACE_LEVEL_ENUM.PROFESSIONAL]: {
    maxCount: 100,
    maxSize: 250, // MB
  },
  [SPACE_LEVEL_ENUM.FLAGSHIP]: {
    maxCount: 200,
    maxSize: 500, // MB
  },
}

// 监听空间级别变化：自动填充默认值（核心逻辑）
const handleLevelChange = (newLevel: number) => {
  // 根据选中的级别从映射表中获取默认值
  const defaults = LEVEL_DEFAULT_MAP[newLevel]
  if (defaults) {
    // 自动填充到表单
    spaceForm.maxSize = defaults.maxSize
    spaceForm.maxCount = defaults.maxCount
  }
}

// 定义空间等级列表：存储从后端获取的空间等级详细信息
const spaceLevelList = ref<API.SpaceLevelVO[]>([])
const loading = ref(false)

// 从后台获取空间等级的详细信息
const fetchSpaceLevelList = async () => {
  const res = await listSpaceLevelUsingGet()
  if (res.data?.code === 0 && res.data?.data) {
    spaceLevelList.value = res.data.data
  } else {
    message.error('获取空间等级列表失败: ' + res.data?.message)
  }
}

// 表单提交处理函数：创建或修改空间
const handleSpaceSubmit = async (values: any) => {
  // 调用新增空间接口（注：此处编辑场景未实现完整，实际应根据是否有id判断调用新增或修改接口）
  loading.value = true

  const spaceId = space.value?.id
  let res
  if (spaceId == null) {
    // 创建空间
    res = await addSpaceUsingPost({
      ...spaceForm,
      spaceType: spaceType.value,
    })
  } else {
    // 修改空间
    res = await updateSpaceUsingPost({
      id: spaceId,
      ...spaceForm,
      maxSize: spaceForm.maxSize! * 1024 * 1024,
    })
  }

  if (res.data?.code === 0 && res.data?.data) {
    message.success('操作成功')
    // 跳转至新创建的空间详情页
    let path = `/space/${spaceId ?? res.data.data}`
    await router.push({
      path: path,
    })
  } else {
    message.error('操作失败: ' + res.data?.message)
  }

  loading.value = false
}

// 编辑空间时的回显处理：当路由中存在id参数时，加载对应空间的详情并填充表单
const editSpace = async () => {
  const id = route.query?.id as string
  if (id) {
    const res = await getSpaceVoByIdUsingGet({ id: id as string })
    if (res.data?.code === 0 && res.data?.data) {
      space.value = res.data.data
      // 填充表单数据
      spaceForm.spaceName = res.data.data.spaceName as string
      spaceForm.spaceLevel = res.data.data.spaceLevel as number
      // 特有字段回显（编辑场景）
      if (res.data.data.maxSize) {
        spaceForm.maxSize = res.data.data.maxSize / (1024 * 1024) // 转换为 MB
      }
      if (res.data.data.maxCount) {
        spaceForm.maxCount = res.data.data.maxCount
      }
    } else {
      message.error('加载空间失败: ' + res.data?.message)
    }
  }
}

// 页面挂载时的初始化操作
onMounted(() => {
  // 如果是编辑场景，加载空间详情
  editSpace()
  // 获取空间等级列表数据
  fetchSpaceLevelList()
  // 监听空间级别变化
  handleLevelChange(spaceForm.spaceLevel)
})
</script>

<style scoped>
/* 基础容器样式：设置最大宽度、居中显示、背景色和阴影效果 */
.container {
  max-width: 600px;
  margin: 40px auto;
  padding: 30px 20px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 标题区域布局：居中显示 */
.upload-only-layout {
  text-align: center;
}

/* 页面标题样式：设置字体大小、颜色和底部边框 */
.page-title {
  margin: 0 0 30px;
  color: #333;
  font-size: 24px;
  font-weight: 600;
  padding-bottom: 15px;
  border-bottom: 1px solid #f5f5f5;
}

/* 主布局容器：采用上下布局，设置子元素间距 */
.main-layout {
  /* 修改为上下布局（flex-direction默认值为row，此处显式设置为column） */
  display: flex;
  flex-direction: column;
  /* 上下布局的间距（原左右布局的水平间距改为垂直间距） */
  gap: 30px;
  min-height: 500px; /* 确保有足够的高度 */
}

/* 表单区域样式：设置背景色、圆角和内边距 */
.form-section {
  /* 上下布局中宽度占满容器 */
  width: 100%;
  background-color: #e1eedf;
  border-radius: 8px;
  padding: 25px;
}

/* 空间介绍区域样式：新增类名用于单独控制介绍区域样式 */
.intro-section {
  /* 上下布局中宽度占满容器 */
  width: 100%;
  /* 增加顶部内边距，与表单区域区分开 */
  padding-top: 20px;
}

/* 表单项样式：设置底部外边距 */
.form-item {
  margin-bottom: 20px !important;
}

/* 输入框、下拉框等表单元素样式：统一边框样式和过渡效果 */
.form-input,
.form-textarea,
.form-select {
  border-radius: 6px !important;
  border-color: #e5e7eb !important;
  transition: all 0.2s ease;
}

/* 表单元素获取焦点时的样式：修改边框颜色和阴影 */
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: #4caf50 !important;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1) !important;
}

/* 提交按钮区域样式：居中显示 */
.submit-item {
  display: flex;
  justify-content: center;
}

/* 提交按钮样式：设置背景色、圆角和过渡效果 */
.submit-btn {
  margin-top: 32px;
  height: 36px !important;
  font-size: 14px !important;
  font-weight: bold;
  background-color: #4caf50 !important;
  border-color: #4caf50 !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
  width: 260px;
}

/* 响应式布局：在小屏幕下保持上下布局，确保显示正常 */
@media (max-width: 992px) {
  .main-layout {
    /* 小屏幕下依然保持上下布局，无需修改flex-direction */
    gap: 20px; /* 小屏幕缩小间距 */
  }

  .form-section,
  .intro-section {
    width: 100%; /* 确保在小屏幕下占满宽度 */
    padding: 15px; /* 小屏幕减小内边距 */
  }

  .submit-btn {
    width: 100%; /* 小屏幕下按钮占满宽度 */
  }
}
</style>
